<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2025/3/27
  Time: 08:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日程安排 - OA办公系统</title>
    <link href="${pageContext.request.contextPath}/css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/all.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
    <div class="container mx-auto fade-in">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">日程安排</h1>
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    <span>新建日程</span>
                </button>
                <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center">
                    <i class="fas fa-users mr-2"></i>
                    <span>发起会议</span>
                </button>
                <div class="relative">
                    <input type="text" placeholder="搜索日程" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 日历视图切换 -->
        <div class="bg-white rounded-lg shadow mb-6">
            <div class="flex border-b overflow-x-auto">
                <button class="px-6 py-3 text-blue-500 border-b-2 border-blue-500 font-medium">日视图</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">周视图</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">月视图</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">列表视图</button>
            </div>
        </div>

        <!-- 日期导航 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <button class="p-2 text-gray-500 hover:text-blue-500 hover:bg-blue-50 rounded-full">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <h2 class="text-xl font-semibold text-gray-800">2023年6月15日 星期四</h2>
                    <button class="p-2 text-gray-500 hover:text-blue-500 hover:bg-blue-50 rounded-full">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <button class="px-3 py-1 text-sm text-blue-500 hover:bg-blue-50 rounded">
                        今天
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200 text-sm">
                        <i class="fas fa-sync-alt mr-1"></i>
                        刷新
                    </button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200 text-sm">
                        <i class="fas fa-cog mr-1"></i>
                        设置
                    </button>
                </div>
            </div>
        </div>

        <!-- 日历主体 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- 左侧日历小部件和待办事项 -->
            <div class="col-span-1">
                <!-- 小日历 -->
                <div class="bg-white rounded-lg shadow mb-6">
                    <div class="p-4 border-b">
                        <h3 class="font-medium text-gray-800">2023年6月</h3>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-7 gap-1 text-center text-xs mb-2">
                            <div class="text-gray-500">日</div>
                            <div class="text-gray-500">一</div>
                            <div class="text-gray-500">二</div>
                            <div class="text-gray-500">三</div>
                            <div class="text-gray-500">四</div>
                            <div class="text-gray-500">五</div>
                            <div class="text-gray-500">六</div>
                        </div>
                        <div class="grid grid-cols-7 gap-1 text-center">
                            <div class="text-gray-400 p-2">28</div>
                            <div class="text-gray-400 p-2">29</div>
                            <div class="text-gray-400 p-2">30</div>
                            <div class="text-gray-400 p-2">31</div>
                            <div class="p-2">1</div>
                            <div class="p-2">2</div>
                            <div class="p-2">3</div>
                            <div class="p-2">4</div>
                            <div class="p-2">5</div>
                            <div class="p-2">6</div>
                            <div class="p-2">7</div>
                            <div class="p-2">8</div>
                            <div class="p-2">9</div>
                            <div class="p-2">10</div>
                            <div class="p-2">11</div>
                            <div class="p-2">12</div>
                            <div class="p-2">13</div>
                            <div class="p-2">14</div>
                            <div class="bg-blue-500 text-white rounded-full p-2">15</div>
                            <div class="p-2">16</div>
                            <div class="p-2">17</div>
                            <div class="p-2 relative">
                                18
                                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-green-500 rounded-full"></span>
                            </div>
                            <div class="p-2">19</div>
                            <div class="p-2 relative">
                                20
                                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-red-500 rounded-full"></span>
                            </div>
                            <div class="p-2">21</div>
                            <div class="p-2">22</div>
                            <div class="p-2 relative">
                                23
                                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-purple-500 rounded-full"></span>
                            </div>
                            <div class="p-2">24</div>
                            <div class="p-2">25</div>
                            <div class="p-2">26</div>
                            <div class="p-2">27</div>
                            <div class="p-2">28</div>
                            <div class="p-2">29</div>
                            <div class="p-2">30</div>
                            <div class="text-gray-400 p-2">1</div>
                            <div class="text-gray-400 p-2">2</div>
                        </div>
                    </div>
                </div>

                <!-- 我的日历 -->
                <div class="bg-white rounded-lg shadow mb-6">
                    <div class="p-4 border-b flex justify-between items-center">
                        <h3 class="font-medium text-gray-800">我的日历</h3>
                        <button class="text-blue-500 text-sm hover:underline">管理</button>
                    </div>
                    <div class="p-4">
                        <ul class="space-y-2">
                            <li class="flex items-center">
                                <span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
                                <span class="text-sm text-gray-700">我的日程</span>
                                <div class="ml-auto">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked>
                                </div>
                            </li>
                            <li class="flex items-center">
                                <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                                <span class="text-sm text-gray-700">部门日程</span>
                                <div class="ml-auto">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked>
                                </div>
                            </li>
                            <li class="flex items-center">
                                <span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
                                <span class="text-sm text-gray-700">公司日程</span>
                                <div class="ml-auto">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked>
                                </div>
                            </li>
                            <li class="flex items-center">
                                <span class="w-3 h-3 bg-purple-500 rounded-full mr-2"></span>
                                <span class="text-sm text-gray-700">中国节假日</span>
                                <div class="ml-auto">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 右侧日程时间轴 -->
            <div class="col-span-3 bg-white rounded-lg shadow">
                <div class="p-4 border-b">
                    <h3 class="font-medium text-gray-800">今日日程</h3>
                </div>
                <div class="p-4">
                    <!-- 时间轴 -->
                    <div class="relative">
                        <!-- 当前时间指示器 -->
                        <div class="absolute left-0 right-0 flex items-center" style="top: 180px;">
                            <div class="w-16 text-xs text-red-500 font-medium">10:30</div>
                            <div class="flex-1 border-t border-red-500 border-dashed"></div>
                            <div class="w-4 h-4 bg-red-500 rounded-full flex items-center justify-center">
                                <div class="w-2 h-2 bg-white rounded-full"></div>
                            </div>
                        </div>

                        <!-- 时间段 -->
                        <div class="flex">
                            <div class="w-16 flex-shrink-0">
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">08:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">09:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">10:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">11:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">12:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">13:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">14:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">15:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">16:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">17:00</div>
                                <div class="h-12 text-xs text-gray-500 text-right pr-2 pt-1">18:00</div>
                            </div>
                            <div class="flex-1 relative border-l">
                                <!-- 时间网格线 -->
                                <div class="absolute left-0 right-0 border-t border-gray-200" style="top: 0px;"></div>
                                <div class="absolute left-0 right-0 border-t border-gray-200" style="top: 48px;"></div>
                                <div class="absolute left-0 right-0 border-t border-gray-200" style="top: 96px;"></div>
                                <div class="absolute left-0 right-0 border-t border-gray-200" style="top: 144px;"></div>
                                <div class="absolute left-0 right-